import { useState } from 'react'
import Bottom from '../../components/bottom'
import { UnorderedListOutline } from 'antd-mobile-icons'
import { Tabs } from 'antd-mobile'
import style from './style.module.scss'

const { message, edit, title, read,readBox ,weight} = style
const InBox = () => {
  const [height, setHeight] = useState(64)
  const [show, setShow] = useState(false)
  const [index, setIndex] = useState(0)
  const [showRead, setShowRead] = useState(false)
  const [visiable, setVisiable] = useState(true)

  return <div onWheel={(e) => {
    if (e.deltaY > 0) {
      setHeight(0)
    } else {
      setHeight(64)
    }
  }}>
    <div className={message}>
      <div className={title}>
        <h1>收件箱</h1>
        <div className={show ? read : ""} onClick={() => setShow(!show)}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", height: "16px", width: "16px", fill: "#222" }}><path d="M14 25h4v4h-4zm-4-3h12v-4H10zm-4-7h20v-4H6zM2 4v4h28V4z"></path></svg></div>
        {
          show && <div className={readBox}>
            <span className={index === 0 ? weight:""} onClick={()=> {setIndex(0);setVisiable(false);setShow(false)}}>已读消息</span>
            <span className={index === 1 ? weight:""} onClick={()=> {setIndex(1);setVisiable(true);setShow(false)}}>未读消息</span>
          </div>
        }
      </div>
      <div style={{ marginTop: '35px' }}>
        <Tabs>
          <Tabs.Tab title='消息' key='fruits'>
            {
              visiable ? <div style={{ textAlign: 'center', marginTop: '10px' }}>
                <h2>您还没有未读消息</h2>
                <p style={{ margin: '5px 0', fontSize: '16px', color: '#666' }}>如果您预定了行程或体验，房东/体验大人发来的消息会显示在这里</p>
                <p style={{ width: '150px', height: '50px', borderRadius: '10px', border: '1px solid #000', margin: '10px auto', fontSize: '16px', lineHeight: '50px' }}><b>探索爱彼迎</b> </p>
              </div> : <div>已读</div>
            }
          </Tabs.Tab>
          <Tabs.Tab title='通知' key='vegetables'>
            <p>你已经读完所有消息了</p>
          </Tabs.Tab>

        </Tabs>
      </div>

    </div>


    <Bottom index={3} height={height}></Bottom>
  </div>
}
export default InBox